<template>
	<view class="content">
		<u-popup :show="share_qrcode_flag" mode="center" round="20">
			<view class="poster">
				<view class="close" @click.stop="close">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/blackClose.png" mode=""></image>
				</view>
				<view class="cover">
					<canvas v-if="!canvasToTempFilePath" style="width: 600rpx;height:900rpx" canvas-id="myCanvas" id="myCanvas"></canvas>
					<image v-else @longpress="showSaveImgWin = true" style="width: 100%; height: 100%;"
						:src="canvasToTempFilePath"></image>
				</view>
				<view class="btns">
					<view @click="$emit('share')">分享</view>
					<view class="right" @click="saveShareImg(canvasToTempFilePath)">保存到本地</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ratio: 1,
				ctx: null, // 创建canvas对象
				canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
				openStatus: true, // 声明一个全局变量判断是否授权保存到相册
				share_qrcode_flag: false,
				showSaveImgWin: false, //保存图片到相册
			};
		},
		methods: {
			close() {
				this.share_qrcode_flag = false
				this.canvasToTempFilePath = null
			},
			share_qrcode(option) {
				if (option) {
					if (!this.canvasToTempFilePath) {
						this.createCanvasImage(option);
					}
					this.share_qrcode_flag = true;
				}
				this.$emit('share_qrcode')
			},

			//获取图片信息
			downloadFileImg(url) {
				return new Promise(resolve => {
					uni.getImageInfo({
						src: url,
						success: res => {
							resolve(res.path);
						},
						fail: err => {
							console.log(err);
							uni.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});
			},
			// 生成海报
			async createCanvasImage(option) {
				// 点击生成海报数据埋点
				if (!this.ctx) {
					uni.showLoading({
						title: '生成中...'
					});

					let device = uni.getSystemInfo();
					let wd = device.windowWidth;
					let hd = device.windowHeight;
					let bgUrl = this.downloadFileImg(option.bgUrl);
					let code = this.downloadFileImg(option.codeUrl);
					Promise.all([bgUrl, code]).then(result => {
						const ctx = uni.createCanvasContext('myCanvas', this);
						ctx.drawImage(result[0], 0, 0, 320, 500); // 绘制背景图
						ctx.drawImage(result[1], 200, 350, 100, 100); // 绘制二维码
						ctx.draw(false, () => {
							// canvas画布转成图片并返回图片地址
							uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									destWidth: 690,
									destHeight: 1040,
									success: res => {
										this.canvasToTempFilePath = res.tempFilePath;
										uni.showToast({
											title: '绘制成功'
										});
									},
									fail: err => {
										uni.showToast({
											title: '绘制失败'
										});
									},
									complete: () => {
										uni.hideLoading();
										uni.hideToast();
									}
								},
								this
							);
						});
					});
				}
			},
			// 保存到系统相册
			saveShareImg(canvasToTempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: canvasToTempFilePath,
					success: () => {
						this.$u.toast('保存成功，快去分享到朋友圈吧~');
					},
					fail: () => {
						this.$u.toast('保存失败~');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.poster {
		position: relative;
		border-radius: 20rpx;
		width: 600rpx;
		height: 900rpx;
		background-size: cover;
		
		.cover {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.qr {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.close {
			position: absolute;
			right: 12rpx;
			top: 12rpx;
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			overflow: hidden;
			z-index: 99;

			&>image {
				width: 100%;
				height: 100%;
			}
		}

		.btns {
			position: absolute;
			bottom: -130rpx;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;

			&>view {
				width: 280rpx;
				height: 86rpx;
				background: #ffffff;
				border-radius: 44rpx;
				text-align: center;
				line-height: 86rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #194FC9;
			}

			.right {
				background-color: #194FC9;
				color: white;
			}
		}
	}
</style>
